<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 数据监控</el-breadcrumb-item>
                <el-breadcrumb-item>表盘SQL设置</el-breadcrumb-item>
                <el-breadcrumb-item>新建SQL表盘</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="loading">
            <el-row>
                <el-col :span="3"><span><span class="red">*</span>监控内容标题：</span></el-col>
                <el-col :span="3"><el-input v-model="title"></el-input></el-col>
                <el-col :span="3"><span><span class="red">*</span>选择数据源：</span></el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择" v-model="connectionId" clearable :disabled="isNext">
                      <el-option
                       v-for="item in sourceList"
                       :key="item.createTime"
                       :label="item.connectName"
                       :value="item.rowId"
                       ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2"><span><span class="red">*</span>类型：</span></el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择" v-model="typeId" clearable>
                        <el-option
                            v-for="item in typeList"
                            :key="item.rowId"
                            :label="item.name"
                            :value="item.rowId"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2" :offset="1">
                    <el-button @click="handleDescription">内容描述</el-button>
                </el-col>
                <!-- <el-col :span="3">
                    <el-select placeholder="请选择" v-model="sqlType" clearable>
                        <el-option
                            v-for="item in sqlTypeValue"
                            :key="item.typeId"
                            :label="item.name"
                            :value="item.typeId"
                        ></el-option>
                    </el-select>
                </el-col> -->
            </el-row>
            <div class="mt20">
                <el-tabs v-model="sqltag" type="card" @tab-click="handleClick">
                    <el-tab-pane label="语句" name="first" disabled>
                        <div class="tab_content">
                            <el-input
                                type="textarea"
                                :row="5"
                                placeholder="请输入sql语句"
                                v-model="sqlContent"
                                :autosize="{minRows:2,maxRows:10}"
                            ></el-input>
                            <div class="r mt20">
                                <el-button @click="verifySQL" :loading="btnloading">验证</el-button>
                                <el-button type="primary" @click="firstNext">下一步</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="布局" name="second" disabled>
                        <div class="clearfix">
                            <div class="mainBlock">
                                <p class="block_title">所有字段&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox :indeterminate="isIndeterminate" v-model="checkedAll" @change="handleCheckAllChange">全选</el-checkbox></p>
                                <div class="field_container" v-loading="loading2">
                                    <el-checkbox-group v-model="sqlFields">
                                        <el-checkbox v-for="item in allField" :label="item" :key="item" :checked="checkedAll" style="display: block; margin-left: 30px">{{item}}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                            <!-- <div class="btn_container">
                                <el-button icon="el-icon-arrow-right" circle @click="moveToMain"></el-button>
                                <el-button icon="el-icon-delete" circle @click="deleteMain"></el-button>
                            </div> -->
                            <!-- <div class="mainBlock">
                                <p class="block_title">主界面显示字段(4个)</p>
                                <div class="field_container">
                                    <el-checkbox-group v-model="mainPageFields">
                                        <el-checkbox v-for="item in mainList" :label="item" :key="item">{{item}}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div> -->
                            <div class="btn_container">
                                <el-button icon="el-icon-arrow-right" circle @click="moveToDetail"></el-button>
                                <el-button icon="el-icon-delete" circle @click="deleteDetail"></el-button>
                            </div>
                            <div class="mainBlock">
                                <p class="block_title">明细页显示字段&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox :indeterminate="isIndeterminate2" v-model="checkedAll2" @change="handleCheckAllChange2">全选</el-checkbox></p>
                                <div class="field_container">
                                    <el-checkbox-group v-model="detailPageFields">
                                        <el-checkbox v-for="item in detailList" :label="item" :key="item" style="display: block; margin-left: 30px">{{item}}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        </div>
                        <div class="r mt20">
                            <el-button @click="backToFirst">上一步</el-button>
                            <el-button type="primary" @click="secondNext">下一步</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="调度" name="third" disabled>
                        <el-row class="setTitle">
                            <el-col :span="2" class="ml10"><el-checkbox v-model="scheduleFlag">调度方式</el-checkbox></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4" :offset="1">
                                <el-select v-model="scheduleId" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in dispatchMenu"
                                        :key="item.rowId"
                                        :label="item.title"
                                        :value="item.rowId">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2"><span>日期：</span></el-col>
                            <el-col :span="4">
                                <el-date-picker
                                    v-model="dateInfo"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="2"><span>时间：</span></el-col>
                            <el-col :span="4">
                                <el-time-select
                                    v-model="timeInfo"
                                    :picker-options="{
                                        start: '00:00',
                                        step: '00:01',
                                        end: '23:59'
                                    }"
                                    editable
                                    clearable
                                    placeholder="选择时间">
                                </el-time-select>
                            </el-col>
                            <el-col :span="2"><span>基准：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="timeFlag" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in timeMenu"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row class="setTitle mt20">
                            <el-col :span="2" class="ml10"><el-checkbox v-model="pushFlag">即时通讯</el-checkbox></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="3"><span>即时通讯：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="imId" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in imMenu"
                                        :key="item.rowId"
                                        :label="item.inteDesc"
                                        :value="item.rowId">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2"><span>发送方式：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="imType" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in sendTypeMenu"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2"><span>发送选项：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="imSendType" placeholder="请选择" clearable @change="imParseChange">
                                    <el-option
                                        v-for="item in imUserIdParseVal"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4"><span>接受人通讯帐号字段：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="imPushField" placeholder="请选择" clearable :disabled="isSwitch">
                                    <el-option
                                        v-for="item in allField"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="4"><span>接受人通讯帐号手工录入：</span></el-col>
                            <el-col :span="4">
                                <el-input v-model="imUserInfo" :disabled="isSwitch"></el-input>
                            </el-col>
                            <el-col :span="3"><span>（多帐号逗号间隔）</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="3"><span>提醒内容：</span></el-col>
                            <el-col :span="10">
                                <el-input
                                    v-model="imPushContent"
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入提醒内容"
                                    style="font-family: '微软雅黑'"
                                >
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row class="setTitle mt20">
                            <el-col :span="2" class="ml10"><el-checkbox v-model="emailSendFlag">发送邮件</el-checkbox></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4"><span>邮件标题：</span></el-col>
                            <el-col :span="4">
                                <el-input v-model="emailSendTitle"></el-input>
                            </el-col>
                            <el-col :span="3"><span>（默认同标题）</span></el-col>
                            <el-col :span="2"><span>发送选项：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="emailSendType" placeholder="请选择" clearable @change="emailParseChange">
                                    <el-option
                                        v-for="item in emailUserIdParseVal"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <!-- <el-col :span="4"><span>是否使用USER_ID映射：</span></el-col>
                            <el-col :span="2" style="padding-top:4px">
                                <el-switch
                                    v-model="emailUserIdParseFlag"
                                    @change="switchEmailChange"
                                ></el-switch>
                            </el-col> -->
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4"><span>邮件收件人字段：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="emailReceiveField" placeholder="请选择" clearable :disabled="isChange">
                                    <el-option
                                        v-for="item in allField"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="3"><span>（Group By）</span></el-col>
                            <el-col :span="4"><span>收件人地址手工录入：</span></el-col>
                            <el-col :span="4">
                                <el-input v-model="emailReceiveAddress" :disabled="isChange"></el-input>
                            </el-col>
                            <el-col :span="4"><span>（多地址逗号间隔）</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4"><span>邮件抄送地址字段：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="emailCopyField" placeholder="请选择" clearable :disabled="isChange">
                                    <el-option
                                        v-for="item in allField"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="3"><span>（Group By）</span></el-col>
                            <el-col :span="4"><span>抄送人地址手工录入：</span></el-col>
                            <el-col :span="4">
                                <el-input v-model="emailCopyAddress" :disabled="isChange"></el-input>
                            </el-col>
                            <el-col :span="4"><span>（多地址逗号间隔）</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4"><span>邮件提醒内容：</span></el-col>
                            <el-col :span="10">
                                <el-input
                                    v-model="emailSendContent"
                                    type="textarea"
                                    :rows="2"
                                    contenteditable="true"
                                    placeholder="请输入邮件提醒内容"
                                >
                                </el-input>

                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="3" :offset="4">
                                <el-checkbox v-model="emailSendAttachFlag" style="margin-top:6px">发送附件</el-checkbox>
                            </el-col>
                            <el-col :span="2"><span>附件格式：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="emailSendAttachType" placeholder="请选择" clearable>
                                    <el-option
                                        v-for="item in fujian"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <div class="btn-container">
                            <el-button @click="secondLast">上一步</el-button>
                            <el-button type="primary" @click="handleCreate" :loading="btnloading2">确定</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <el-dialog
                title="内容描述"
                :visible.sync="dialogVisible"
                width="40%"
            >
                <div>
                    <el-input type="textarea" v-model="description" autosize></el-input>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="removeDes">取 消</el-button>
                    <el-button type="primary" @click="contentUpdate" :loading="btnloading3">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      isIndeterminate: true,
      isIndeterminate2: true,
      checkedAll:false,
      checkedAll2:false,
      loading: false,
      loading2: false,
      sendContent:'',
      sqltag: "first",
      //mainList: [],
      detailList: [],
      fujian: [{
          value:"0",
          label:"xlxs"
      }],
      allField:[],
      //新建需要的参数
      title: "",
      connectionId: "",
      sqlType: "",
      typeId:"",
      description:"",
      sqlContent: "",
      sqlFields: [],
      //mainPageFields: [],
      detailPageFields: [],
      dateInfo:"",
      emailCopyAddress:"",
      emailCopyField:"",
      emailReceiveAddress:"",
      emailReceiveField:"",
      emailSendAttachFlag: "",
      emailSendAttachType:"",
      emailSendContent:"",
      emailSendFlag:"",
      emailSendTitle:"",
      imId:"",
      imPushContent:"",
      pushFlag:"",
      scheduleFlag:"",
      scheduleId:"",
      timeInfo:"",
      isNextStep: false,
      isSecondNext: true,
      btnloading: false,
      btnloading2: false,
      btnloading3: false,
      sendTypeMenu: [{
          value:"0",
          label:"汇总"
      },{
          value:"1",
          label:"明细"
      }],
      imType:"",
      //imUserIdParse: false,
      imPushField:"",
      imUserInfo:"",
      isSwitch: false,
      //emailUserIdParseFlag: false,
      isChange: false,
      imSendType:"",
      emailSendType:"",
      isNext: false,
      isEmailTitle: false,
      timeFlag: "0",
      imUserIdParseVal:[{
          value: '0',
          label: '使用帐号关联'
      },{
          value: '1',
          label: '使用USER_ID映射'
      },{
          value: '-1',
          label: '不使用关联映射'
      }],
      emailUserIdParseVal:[{
          value: '0',
          label: '使用帐号关联'
      },{
          value: '1',
          label: '使用USER_ID映射'
      },{
          value: '-1',
          label: '不使用关联映射'
      }],
      timeMenu: [{
          value: "0",
          label: "调度开始日期"
      },{
          value: "1",
          label: "调度结束日期"
      }]
    };
  },
  computed: mapState({
    msg: state => state.sql.msg,
    flag: state => state.sql.flag,
    sourceList: state => state.sql.sourceList,
    valiFlag: state => state.sql.validFlag,
    allFields: state => state.sql.allFields,
    dispatchMenu: state => state.sql.dispatchMenu,
    imMenu: state => state.sql.imMenu,
    sqlInfo: state => state.sql.sqlInfo,
    verifyCode: state => state.system.verifyCode,
    sqlTypeValue: state => state.system.sqlType,
    typeList(state) {
        let arr = [];
        state.sql.typeList.map((item) => {
            if(item.openFlag == true) {
                arr.push(item);
            }
        });
        return arr;
    },
    connectInfo: state => state.sql.connectInfo
  }),
  mounted() {
      if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
    this.getSqlType();
    this.getTypeList();
    this.getSourceList();
    this.getSqlInfo();
    this.getImMenu();
    this.getDispatchMenu();
  },
  methods: {
    textareaTo(str) {
        if(str) {
            let reg = new RegExp("\n","g");
            let regSpace = new RegExp(' ','g');
            str = str.replace(reg, "<br>");
            str = str.replace(regSpace, "&nbsp");
            return str;
        }else{
            return;
        }
    },
    toTextarea(str) {
        if(str) {
            let reg = new RegExp("<br>","g");
            let regSpace = new RegExp("&nbsp","g");
            str = str.replace(reg,"\n");
            str = str.replace(regSpace," ");
            return str;
        }else{
            return;
        }
    },
    contentUpdate() {
        if(this.$route.params.rowId) {
            this.btnloading3 = true;
            this.$store.dispatch("contentUpdate",{
                sessionId: localStorage.getItem('sessionId'),
                contentId: this.$route.params.rowId,
                description: this.textareaTo(this.description)
            }).then(() => {
                this.btnloading3 = false;
                this.$message(this.msg);
                this.dialogVisible = false;
            })
        }else{
            this.dialogVisible = false;
        }
    },
    handleDescription() {
        this.dialogVisible = true;
    },
    removeDes() {
        this.dialogVisible = false;
    },
    emailParseChange(val) {
        if(this.connectInfo.userIdEmailParsePackage == null) {
            if(val == 1) {
                this.$message("数据链接里面没有映射包，不允许选择");
            }else if(val==-1){
                this.isChange=false;
            }else{
                if(this.imdType !== "-1") {
                    this.imPushField = "";
                    this.imUserInfo = "";
                    this.isSwitch = true;
                }else{
                    this.isSwitch = false;
                }
            }
        }else{
            if(this.allField.indexOf('USER_ID') === -1) {
                if(val == 1) {
                    this.$message("字段中没有USER_ID，不允许选择");
                    this.emailReceiveField = "";
                    this.emailReceiveAddress = "";
                    this.emailCopyField = "";
                    this.emailCopyAddress = "";
                    this.isChange = true
                }else{
                    if(this.emailSendType !== "-1") {
                        this.emailReceiveField = "";
                        this.emailReceiveAddress = "";
                        this.emailCopyField = "";
                        this.emailCopyAddress = "";
                        this.isChange = true
                    }else{
                        this.isChange = false
                    }
                }
            }else{
                if(this.emailSendType !== "-1") {
                    this.emailReceiveField = "";
                    this.emailReceiveAddress = "";
                    this.emailCopyField = "";
                    this.emailCopyAddress = "";
                    this.isChange = true
                }else{
                    this.isChange = false
                }
            }
        }
    },
    imParseChange(val) {
        if(this.connectInfo.userIdImParsePackage == null) {
            if(val == 1) {
                this.$message("数据链接里面没有映射包，不允许选择");
            }else{
                // if(this.imSendType !== "-1") {
                //     this.imPushField = "";
                //     this.imUserInfo = "";
                //     this.isSwitch = true;
                // }else{
                //     this.isSwitch = false;
                // }
            }
        }else{
            if(this.allField.indexOf('USER_ID') === -1) {
                // if(val == 1) {
                //     this.$message("字段中没有USER_ID，不允许选择");
                //     this.imPushField = "";
                //     this.imUserInfo = "";
                //     this.isSwitch = true;
                // }else{
                //     if(this.imSendType !== "-1") {
                //         this.imPushField = "";
                //         this.imUserInfo = "";
                //         this.isSwitch = true;
                //     }else{
                //         this.isSwitch = false;
                //     }
                // }
            }else{
                // if(this.imSendType !== "-1") {
                //     this.imPushField = "";
                //     this.imUserInfo = "";
                //     this.isSwitch = true;
                // }else{
                //     this.isSwitch = false;
                // }
            }
        }
    },
    handleCheckAllChange(val) {
        this.sqlFields = val ? this.allField : [];
        this.isIndeterminate = false;
    },
    handleCheckAllChange2(val) {
        this.detailPageFields = val ? this.detailList : [];
        this.isIndeterminate2 = false;
    },
    getSqlType() {
        this.$store.dispatch("getTypes",{
            sessionId: localStorage.getItem('sessionId')
        })
    },
    handleClick(tab, event) {
        return false;
    },
    getImMenu() {
        this.$store.dispatch("getImMenu", {
          pageNo: 1,
          pageSize: 99,
          sessionId: localStorage.getItem("sessionId")
        });
    },
    getDispatchMenu() {
        this.$store.dispatch("getDispatchMenu", {
          pageNo: 1,
          pageSize: 99,
          sessionId: localStorage.getItem("sessionId")
        });
    },
    getSourceList() {
      this.$store.dispatch("getSourceList", {
        pageNo: 1,
        pageSize: 99,
        sessionId: localStorage.getItem("sessionId")
      });
    },
    verifySQL() {
      if(this.connectionId.length == 0) {
          this.$message("请选择数据源");
      }else if(this.sqlContent.length == 0){
          this.$message("请输入SQL语句");
      }else{
          this.btnloading = true;
          this.loading = true;
          this.$store
            .dispatch("verifySql", {
                connectionId: this.connectionId,
                sql: this.sqlContent,
                sessionId: localStorage.getItem("sessionId")
            })
            .then(() => {
                this.loading = false;
                this.btnloading = false;
                if (this.valiFlag == 1) {
                    this.isNextStep = true;
                    this.$message("验证sql通过");
                    this.loading2 = true;
                    this.$store.dispatch("getAllFields", {
                        sql: this.sqlContent,
                        connectionId: this.connectionId,
                        sessionId: localStorage.getItem("sessionId")
                    }).then(() => {
                        this.loading2 = false;
                        this.allField = [].concat(this.allFields);
                        if(this.$route.params.rowId) {
                            // this.mainList.forEach((item) => {
                            //     if(this.allFields.indexOf(item) == -1) {
                            //         this.isSecondNext = false;
                            //     }
                            // })
                            this.detailList.forEach((item) => {
                                if(this.allFields.indexOf(item) == -1) {
                                    this.isSecondNext = false;
                                }
                            })
                        }
                    })
                } else {
                    this.$message(this.msg);
                }
            });
      }
    },
    firstNext() {
      if(this.title == "") {
          this.$message("请输入监控内容标题");
      }else if(this.typeId.length == 0) {
          this.$message("请选择类型");
      }else{
          this.emailSendTitle = this.title;
          this.isEmailTitle = true;
          if(this.$route.params.rowId) {
              if(this.sqlContent !== this.sqlInfo.dashBoardSqlEntity.sqlContent || this.connectionId !== this.sqlInfo.dashBoardSqlEntity.connectionId || this.typeId !== this.sqlInfo.dashBoardSqlEntity.typeId) {
                  if(this.isNextStep == false) {
                      this.$message("验证通过才能进行下一步操作");
                  }else{
                      this.sqltag = "second";
                      this.isNext = true;
                      this.isNextStep = false;
                  }
              }else{
                  this.sqltag = "second";
                  this.isNext = true;
                  this.isNextStep = false;
              }
          }else{
              if (this.isNextStep == true) {
                this.sqltag = "second";
                this.isNext = true;
                this.isNextStep = false;
              }else {
                this.$message("验证通过才能进行下一步操作");
              }
          }
      }
    },
    secondLast(){
        this.sqltag = "second";
    },
    // moveToMain() {
    //   this.mainList = [].concat(this.sqlFields);
    //   if (this.sqlFields.length > 4) {
    //     this.$message("最多只能放4个字段");
    //     this.mainList = this.mainList.slice(0,4);
    //   }
    // },
    // deleteMain() {
    //   for (var i = 0; i < this.mainPageFields.length; i++) {
    //     for (var j = 0; j < this.mainList.length; j++) {
    //       if (this.mainPageFields[i] == this.mainList[j]) {
    //         this.mainList.splice(j, 1);
    //       }
    //     }
    //   }
    // },
    moveToDetail() {
      //明细字段一项也没有时
      if(this.detailList.length == 0) {
          this.detailList = [].concat(this.sqlFields);
      }else{
          if(this.sqlFields.length == 1) {
            if(this.detailList.indexOf(this.sqlFields[0]) !== -1) {
                this.$message('已存在该项！');
            }else{
                this.detailList = this.detailList.concat(this.sqlFields)
            }
          }else{
              this.sqlFields.map((item) => {
                  if(this.detailList.indexOf(item) == -1) {
                      this.detailList.push(item);
                  }else{
                      this.$message('已存在该项！');
                  }
              })
          }
      }
    },
    deleteDetail() {
        //如果全选，清空数组
        if(this.detailPageFields.length == this.detailList.length) {
            this.detailList.splice(0,this.detailList.length);
        //不是全选只删除选中的
        }else{
            for (var i = 0; i < this.detailPageFields.length; i++) {
                for (var j = 0; j < this.detailList.length; j++) {
                    if (this.detailPageFields[i] == this.detailList[j]) {
                        this.detailList.splice(j, 1);
                    }
                }
            }
        }
    },
    backToFirst() {
      this.sqltag = "first";
      this.isNext = false;
    },
    secondNext() {
      this.$store.dispatch("getConnectById",{
          rowId: this.connectionId,
          sessionId: localStorage.getItem('sessionId')
      })
      if(this.isSecondNext) {
          if (this.detailList.length == 0) {
            this.$message("详情页面字段不能为空！");
            return;
          }else {
            this.sqltag = "third";
          }
      }else{
          this.$alert('界面字段在所有字段中不存在', 'confirm', {
          confirmButtonText: '确定',
          callback: action => {
           // this.mainList = [];
            this.detailList = [];
            this.isSecondNext = true;
          }
        });
      }
    },
    handleCreate() {
        let params = {
            title: this.title,
            connectionId: this.connectionId,
            typeId: this.typeId,
            sqlContent: this.sqlContent,
            sqlFields: this.allField.join(','),
            //mainPageFields: this.mainList.join(','),
            detailPageFields: this.detailList.join(','),
            dateInfo: this.dateInfo || null,
            emailCopyAddress: this.emailCopyAddress || null,
            emailCopyField: this.emailCopyField || null,
            emailReceiveAddress: this.emailReceiveAddress || null,
            emailReceiveField: this.emailReceiveField || null,
            emailSendAttachFlag: this.emailSendAttachFlag,
            emailSendAttachType: this.emailSendAttachType || null,
            emailSendContent: this.emailSendContent || null,
            emailSendFlag: this.emailSendFlag,
            emailSendTitle: this.emailSendTitle || null,
            imId: this.imId || null,
            imType: this.imType || null,
            imSendType: this.imSendType || null,
            emailSendType: this.emailSendType || null,
            imPushField: this.imPushField || null,
            imUserInfo: this.imUserInfo || null,
            imPushContent: this.imPushContent || null,
            pushFlag: this.pushFlag,
            scheduleFlag: this.scheduleFlag,
            scheduleId: this.scheduleId || null,
            timeInfo: this.timeInfo || null,
            description: this.textareaTo(this.description),
            timeFlag: this.timeFlag,
            sessionId: localStorage.getItem('sessionId')
        }
        if(this.$route.params.rowId) {
            if(this.allField.indexOf('USER_ID') === -1) {
                if(this.imSendType == 1 || this.emailSendType == 1) {
                    this.$message('发送选项不能选择使用USER_ID映射')
                }else{
                    this.btnloading2 = true;
                    params.rowId = this.$route.params.rowId;
                    this.$store.dispatch('updateSql',params).then(() => {
                        if(this.flag == 0) {
                            this.btnloading2 = false;
                            this.$message(this.msg);
                            this.$router.push({ path: "/sqlsetting" });
                        }else{
                            this.btnloading2 = false;
                            this.$message(this.msg);
                        }
                    })
                }
            }else{
                this.btnloading2 = true;
                params.rowId = this.$route.params.rowId;
                this.$store.dispatch('updateSql',params).then(() => {
                    if(this.flag == 0) {
                        this.btnloading2 = false;
                        this.$message(this.msg);
                        this.$router.push({ path: "/sqlsetting" });
                    }else{
                        this.btnloading2 = false;
                        this.$message(this.msg);
                    }
                })
            }
        }else{
            if(this.allField.indexOf('USER_ID') === -1) {
                if(this.imSendType == 1 || this.emailSendType == 1) {
                    this.$message('发送选项不能选择使用USER_ID映射')
                }else{
                    this.btnloading2 = true;
                    this.$store.dispatch('createDashboard',params).then(() => {
                        if(this.flag == 0) {
                            this.btnloading2 = false;
                            this.$message(this.msg);
                            this.$router.push({ path: "/sqlsetting" });
                        }else{
                            this.btnloading2 = false;
                            this.$message(this.msg);
                        }
                    })
                }
            }else{
                this.btnloading2 = true;
                this.$store.dispatch('createDashboard',params).then(() => {
                    if(this.flag == 0) {
                        this.btnloading2 = false;
                        this.$message(this.msg);
                        this.$router.push({ path: "/sqlsetting" });
                    }else{
                        this.btnloading2 = false;
                        this.$message(this.msg);
                    }
                })
            }
        }
    },
    getSqlInfo() {
        if(this.$route.params.rowId) {
            this.loading = true;
            let rowId = this.$route.params.rowId;
            this.$store.dispatch('getSqlInfo',{
                rowId: rowId,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                if(this.msg !== '成功') {
                    this.$message(this.msg);
                    this.loading = false;
                }else{
                    this.loading = false;
                    //数据回显
                    this.title = this.sqlInfo.dashBoardSqlEntity.title;
                    this.connectionId = this.sqlInfo.dashBoardSqlEntity.connectionId;
                    this.typeId = this.sqlInfo.dashBoardSqlEntity.typeId;
                    this.sqlContent = this.sqlInfo.dashBoardSqlEntity.sqlContent;
                    this.description = this.toTextarea(this.sqlInfo.dashBoardSqlEntity.description);
                    this.allField = this.sqlInfo.dashBoardSqlEntity.sqlFields.split(',');
                    //this.mainList = this.sqlInfo.dashBoardSqlEntity.mainPageFields.split(',');
                    this.detailList = this.sqlInfo.dashBoardSqlEntity.detailPageFields.split(',');
                    this.scheduleFlag = this.sqlInfo.dashBoardSqlEntity.scheduleFlag;
                    this.scheduleId = this.sqlInfo.dashBoardSqlEntity.scheduleId;
                    this.dateInfo = this.sqlInfo.dashBoardSqlEntity.dateInfo;
                    this.timeInfo = this.sqlInfo.dashBoardSqlEntity.timeInfo;
                    this.pushFlag = this.sqlInfo.dashBoardSqlEntity.pushFlag;
                    this.imId = this.sqlInfo.dashBoardSqlEntity.imId;
                    this.imType = typeof(this.sqlInfo.dashBoardSqlEntity.imType) == 'number'?this.sqlInfo.dashBoardSqlEntity.imType.toString():null;
                    this.timeFlag = typeof(this.sqlInfo.dashBoardSqlEntity.timeFlag) == 'number'?this.sqlInfo.dashBoardSqlEntity.timeFlag.toString():null;
                    this.imPushField = this.sqlInfo.dashBoardSqlEntity.imPushField;
                    this.imUserInfo = this.sqlInfo.dashBoardSqlEntity.imUserInfo;
                    this.imPushContent = this.sqlInfo.dashBoardSqlEntity.imPushContent;
                    this.emailSendFlag = this.sqlInfo.dashBoardSqlEntity.emailSendFlag;
                    this.emailSendTitle = this.sqlInfo.dashBoardSqlEntity.emailSendTitle;
                    this.emailReceiveField = this.sqlInfo.dashBoardSqlEntity.emailReceiveField;
                    this.emailReceiveAddress = this.sqlInfo.dashBoardSqlEntity.emailReceiveAddress;
                    this.emailCopyField = this.sqlInfo.dashBoardSqlEntity.emailCopyField;
                    this.emailCopyAddress = this.sqlInfo.dashBoardSqlEntity.emailCopyAddress;
                    this.emailSendContent = this.sqlInfo.dashBoardSqlEntity.emailSendContent;
                    this.emailSendAttachFlag = this.sqlInfo.dashBoardSqlEntity.emailSendAttachFlag;
                    this.emailSendAttachType = typeof(this.sqlInfo.dashBoardSqlEntity.emailSendAttachType) == 'number' ? this.sqlInfo.dashBoardSqlEntity.emailSendAttachType.toString():null;
                    this.imSendType = typeof(this.sqlInfo.dashBoardSqlEntity.imSendType) == 'number'?this.sqlInfo.dashBoardSqlEntity.imSendType.toString():null;
                    this.emailSendType = typeof(this.sqlInfo.dashBoardSqlEntity.emailSendType) == 'number'?this.sqlInfo.dashBoardSqlEntity.emailSendType.toString():null;
                    // if(this.imSendType !== "-1") {
                    //     this.imPushField = "";
                    //     this.imUserInfo = "";
                    //     this.isSwitch = true;
                    // }else{
                    //     this.isSwitch = false;
                    // }
                    if(this.emailSendType !== "-1") {
                        this.emailReceiveField = "";
                        this.emailReceiveAddress = "";
                        this.emailCopyField = "";
                        this.emailCopyAddress = "";
                        this.isChange = true
                    }else{
                        this.isChange = false
                    }
                }
            })
        }
    },
    getTypeList() {
        this.$store.dispatch('getTypeList',{
            pageSize: 9999,
            sessionId: localStorage.getItem('sessionId')
        })
    }
  }
};
</script>
<style>
.container >>> .el-textarea__inner{
    font-family: "微软雅黑"
}
.el-transfer {
  width: 510px;
  margin: 10px auto;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
  font-size: 12px;
}
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
  font-size: 12px;
}
.el-col > span {
  float: right;
  font-size: 12px;
  margin: 5px 5px 0 0;
}
.setTitle {
  height: 40px;
  background-color: #eee;
  line-height: 33px;
}
.setTitle span {
  font-weight: bold;
}
.ml48 {
  margin-left: 48px;
}
.mainBlock {
  float: left;
  width: 190px;
  height: 210px;
  border: 1px solid #eee;
}
.block_title {
  padding: 5px 0 5px 6px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}
.field_container {
  height: 170px;
  overflow-y: auto;
}
.el-checkbox-group > label:first-child {
  margin: 12px 0 0 30px;
}
/* .el-checkbox {
  margin-top: 8px;
} */
.btn_container {
  float: left;
  margin: 93px 20px;
}
.el-tabs__item.is-disabled {
    color: #303133;
    cursor:default
}
.el-tabs__item.is-active {
    color: #409EFF;
}

</style>


